<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>install</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <style>
      body {
        margin: 2em;
        text-align: center;
      }
      .plcol {
        /* background-color: red; */
        margin: 8px;
        padding: 1.25em;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/5.6.0/mobx.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/5.3.6/custom.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      class Platform extends React.Component {
        constructor(props) {
          super(props);
          this.state = { liked: false };
        }

        render() {
          let host = location.protocol + "//" + location.host;
          let href = `itms-services://?action=download-manifest&url=${host}/ios.plist`;
          return (
            <div className="col-12 col-md-6">
              <div className="card plcol">
                <h3 className="card-title">{this.props.info.name}</h3>
                <div className="card-body">
                  <p className="card-text">版本：{this.props.info.version}</p>
                  <p className="card-text">
                    大小：{numeral(this.props.info.size).format("0.0b")}
                  </p>
                  <p className="card-text">
                    时间：
                    {new Date(this.props.info.time).toLocaleString()}
                  </p>
                  <a
                    href="#"
                    className="btn btn-primary"
                    onClick={() => {
                      console.log(this.props.info.url);
                      window.open(this.props.info.url, "_blank");
                    }}
                  >
                    下载
                  </a>
                  {this.props.info.name == "ios" && (
                    <a className="btn btn-primary ml-3" href={href}>
                      安装
                    </a>
                  )}
                </div>
              </div>
            </div>
          );
        }
      }
    </script>
    <script type="text/babel">
      const store = mobx.observable({
        platforms: []
      });
      const { observer } = mobxReact;
      const { observable } = mobx;
      const Application = props => {
        return (
          <div>
            <div className="container">
              <div className="row">
                <div className="col">
                  <h1>安装包列表</h1>
                </div>
              </div>
              <div className="row">
                {props.store.platforms.map((v, k) => {
                  return <Platform info={v} key={k} />;
                })}
              </div>
            </div>
          </div>
        );
      };
      const MobApp = observer(Application);
      ReactDOM.render(
        <MobApp store={store} />,
        document.getElementById("container")
      );
      fetch("/getAppList")
        .then(function(res) {
          return res.json();
        })
        .then(function(json) {
          console.log(json);
          //   store.platforms.push({ name: "android", version: "3.0.1" });
          store.platforms = json;
        })
        .catch(e => {
          alert(e);
        });
    </script>
  </body>
</html>
